<template>
  <div class="abnormal">
    <div class="todo-header">
      <div class="item-1">
        序号
      </div>
      <div class="item-2">
        一级分类
      </div>
      <div class="item-3">
        二级分类
      </div>
      <div class="item-4">
        异常发生时间
      </div>
      <div class="item-5">
        处理状态
      </div>
    </div>
    <a-carousel :autoplay="true" dot-position="right" dots="false" :slides-to-show="num" :slides-to-scroll="1" id="carousel">
      <div class="todo-item" v-for="(item,index) in abnormalList" :key="index">
        <div class="item-1">
          {{ index + 1 }}
        </div>
        <div class="item-2">
          <TableTootip :content="item.firstType"></TableTootip>
        </div>
        <div class="item-3" ref="firstType">
          <TableTootip :content="item.secondType" :width="textWidth"></TableTootip>
        </div>
        <div class="item-4">
          <TableTootip :content="item.abnormalCreateDatetime"></TableTootip>
        </div>
        <div v-if="item.handleStatus == '001'" class="item-5">
          <span style="display: inline-block;width: 11px;height: 11px;border-radius: 50%;background-color: #F53F3F;margin-right: 5px;"></span>{{ item.handleStatusName }}
        </div>
        <div v-else class="item-5">
          <span style="display: inline-block;width: 11px;height: 11px;border-radius: 50%;background-color: #3FEA4B;margin-right: 5px;"></span>{{ item.handleStatusName }}
        </div>
      </div>
    </a-carousel>
    <div class="nodata" v-if="!abnormalList.length">暂无数据</div>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";
import TableTootip from '../../../components/TableTootipHome.vue'
export default {
  components:{
    TableTootip
  },
  data() {
    return{
      abnormalList:[],
      textWidth: 0,
      num:4
    }
  },
  mounted() {
    this.getAbnormalQuestion()
  },
  methods:{
    //异常待解决问题
    getAbnormalQuestion() {
      req('post', `dataBoard/getAbnormalQuestion`)
        .then(res => {
          if (res.result === 'success') {
            this.abnormalList = res.data
            this.num = this.abnormalList.length<4?this.abnormalList.length:4
            if(this.abnormalList.length){
              this.$nextTick(() => {
                if(this.$refs.firstType){
                  this.textWidth = this.$refs.firstType[0].offsetWidth
                }
              })
            }
          }
        })
    },
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
.abnormal {
  position: relative;
  height: 255px;
}
.todo-item,.todo-header {
  display: flex!important;
  line-height: 45px;
  font-size: 14px;
  border-bottom: 1px solid #e8e8e8;
}
.todo-header {
  margin-top: 10px;
  background-color: #f1f2f5;
}
.item-1 {
  width: 8%;
  padding-left: 5px;
}
.item-2,.item-5 {
  width: 15%;
}
.item-4 {
  width: 27%;
}
.item-3 {
  width: 35%;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (max-width: 1440px) {
  .todo-item,.todo-header{
    font-size: 12px;
  }
}
</style>
